<template>
  <InfoCard>
    <template #header v-if="payInfo.item.verify?.verifyUp">
      <div class="text-center" v-html="payInfo.item.verify?.verifyUp"></div>
    </template>
    <template #content>
      <div
        style="text-align: center"
        v-if="payInfo.payMessage?.input || payInfo.item.verify?.verifyDown"
      >
        <template :key="item.id" v-for="item in payInfo.payMessage?.input" >
          <CopyLine
            style="text-align: left"
            :title="item.title"
            :value="item.value"
            v-if="showItem(item.title)"
          />
        </template>

        <div v-html="payInfo.item.verify?.verifyDown"></div>
      </div>
    </template>
  </InfoCard>
</template>

<script setup lang="ts">
import InfoCard from './InfoCard.vue'
import CopyLine from '@/components/CopyLine.vue'
import { onMounted } from 'vue'

const props = defineProps({
  payInfo: {
    type: Object,
    default: () => ({})
  }
})

onMounted(() => {})

function showItem(e: string) {
  return props.payInfo.item.verify?.verifyEditor.some((item) => {
    return item.title === e
  })
}
</script>
